<template>
  <page-header-wrapper @back="() => this.$router.go(-1)">
    <template>
      <a-card :bordered="false">
        <!-- 详情表单展示 start -->
        <!-- 付款明细 -->
        <a-descriptions bordered title="付款明细">
          <a-descriptions-item label="申请单号" :span="3">
            {{ paymentDetails.applyNo + ' ' + paymentDetails.applyReason + ' ' }}
            <div class="status">
              <!-- {{ thisStatus | enumValueByKey($const.EXAMINE_TYPE) }} -->
              {{ this.$route.query.now }}
            </div>
          </a-descriptions-item>
          <a-descriptions-item label="申办方">{{ paymentDetails.sponsorName }}</a-descriptions-item>
          <a-descriptions-item label="项目编号"> {{ paymentDetails.projectNo }}</a-descriptions-item>
          <a-descriptions-item label="付款类型"> {{ paymentDetails.type | enumValueByKey($const.SUBJECTANDREESA) }} </a-descriptions-item>
          <a-descriptions-item label="收款人员" v-if="isShow"> {{ paymentDetails.type == this.$const.SUBJECTANDREESA.DAISHENGPI.value ? paymentDetails.researchDetailName : paymentDetails.ptsName }} </a-descriptions-item>
          <a-descriptions-item label="收款账号" v-if="isShow">
            <span>{{ paymentDetails.bankName || '' }}</span>
            <span>{{ paymentDetails.bankNo | cardNoDeal }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="申请金额"> {{ paymentDetails.totalAmount | formatAmount }} </a-descriptions-item>
          <!-- <a-descriptions-item label="当前状态"> {{ thisStatus | enumValueByKey($const.EXAMINE_TYPE) }} </a-descriptions-item> -->
          <a-descriptions-item label="支付状态"> {{ this.$route.query.now }} </a-descriptions-item>
          <a-descriptions-item label="支付单号"> {{ paymentDetails.payNo }} </a-descriptions-item>
        </a-descriptions>
        <!-- 费用明细 -->
        <a-descriptions title="费用明细" :style="{ 'margin-top': '20px' }" />
        <a-table
          ref="table"
          size="default"
          bordered
          :row-key="record => record.id"
          :pagination="false"
          :data-source="dataTable"
        >
          <a-table-column title="序列" key="id" data-index="id" />
          <a-table-column title="报销类目" key="applyType" data-index="applyType" />
          <a-table-column title="访视阶段" key="visitRecordInfo" data-index="visitRecordInfo" />
          <a-table-column title="发生日期" key="happenDate" data-index="happenDate">
            <template slot-scope="text, record">
              {{ record.happenDate | moment('YYYY-MM-DD') }}
            </template>
          </a-table-column>
          <a-table-column title="报销金额" key="amount" data-index="amount" />
          <a-table-column title="文件">
            <template slot-scope="text, record">
              <a v-if="record.fileList.length" @click="clickViewFile(record)">查看</a>
              <span v-else>无</span>
            </template>
          </a-table-column>
        </a-table>
        <!-- 支付状态 -->
        <a-descriptions title="支付状态" />
        <!-- <a-steps direction="vertical" size="small" :current="2">
          <a-step title="费用申请" description="2021-08-23 CRC001提交申请" />
          <a-step title="研究者审批" description="2021-08-24 研究者001同意申请" />
          <a-step title="PM审批" description="2021-09-01 P同意申请" />
          <a-step title="财务审批" description="2021-09-03 财务同意审批" />
          <a-step title="银行支付" description="2021-09-06 银行完成支付 付款单号987654321" />
        </a-steps> -->
        <a-steps direction="vertical" :current="checkIndex" size="small">
          <a-step title="费用申请" :description="applyDesc" />
          <a-step
            v-for="item in costRecords"
            :title="item.approveTitle"
            :status="item.status == $const.FEE_CHECK_STATUS.FAIL.value || item.status == $const.FEE_CHECK_STATUS.REJECT.value ? 'error' : ''"
            :subTitle="item.refuseReason"
            :key="item.id"
          >
            <template slot="description">
              <span>{{ item.desc }}</span>
              <a v-if="item.approveTitle === '申报个税' && item.proofUrl" style="margin-left: 10px" target="_blank" :href="item.proofUrl | dealImageUrl">个税凭证</a>
              <a v-if="item.approveTitle === '银行付款' && item.proofUrl" style="margin-left: 10px" target="_blank" :href="item.proofUrl | dealImageUrl">支付凭证</a>
            </template>
          </a-step>
        </a-steps>
        <!-- <a style="margin-left: 40px" target="_blank" :href="costRecords[costRecords.length - 1].proofUrl | dealImageUrl" v-if="costRecords[costRecords.length - 1].approveTitle === '银行付款'">支付凭证</a> -->
        <!-- <a @click="clickViewVoucher" :style="{'padding-left': '40px'}">查看凭证</a> -->
        <!-- 详情表单展示 end -->
      </a-card>
      <!-- 费用文件预览 -->
      <ViewFile ref="viewFileRef" :viewFileVisible="viewFileVisible" @closeViewFile="viewFileVisible = false" />
    </template>
  </page-header-wrapper>
</template>

<script>
import { getApplyDetail } from '@/api/cost/cost'
import ViewFile from './ViewFile'
import moment from 'moment'
export default {
  components: { ViewFile },
  data () {
    return {
      queryParam: {
        id: this.$route.query.id
      },
      isShow: false,
      paymentDetails: {},
      approveMainList: [],
      costRecords: [],
      proCost: {},
      dataTable: [],
      checkIndex: 0,
      applyDesc: '',
      viewFileVisible: false
    }
  },
  created () {
    this.checkRole()
    this.getApplyDetail()
  },
  methods: {
    // 判断角色
    checkRole () {
      this.isShow = this.$options.filters.isHasAuth(this.$const.ROLE_TYPE.CRC.value) || this.$options.filters.isHasAuth(this.$const.ROLE_TYPE.PM.value) || this.$options.filters.isHasAuth(this.$const.ROLE_TYPE.FINANCE.value) ? 1 : 0
    },
    // 请求详情
    getApplyDetail () {
      getApplyDetail({ ...this.queryParam })
        .then(res => {
          console.log(res, '获取的合同模板列表信息')
          // const { approveMainList, costRecords, detailList, proCost } = res
          const { proCost, detailList, costRecords } = res
          this.paymentDetails = proCost
          this.dataTable = detailList
          if (costRecords && costRecords.length > 0) {
            this.checkIndex = costRecords[costRecords.length - 1].status === 0 ? costRecords.length : costRecords.length + 1
            this.costRecords = costRecords.map(item => ({
              ...item,
              desc: item.status === this.$const.FEE_CHECK_STATUS.WAIT.value ? this.$const.FEE_CHECK_STATUS.WAIT.desc : `${moment(item.modifyTime).format('YYYY-MM-DD HH:mm:ss')}  ${item.content || ''} 【${this.$options.filters.enumValueByKey(item.status, this.$const.FEE_CHECK_STATUS)}】`
            }))
          }
          this.applyDesc = moment(proCost.createTime).format('YYYY-MM-DD HH:mm:ss') + ' ' + proCost.createrName + '  提交审核'
        })
        .catch(() => {})
    },
    clickViewVoucher (record) {
      console.log('点击查看凭证')
    },
    // 点击查看预览文件
    clickViewFile (record) {
      this.viewFileVisible = true
      this.$refs.viewFileRef.handleData(record.fileList)
    }
  }
}
</script>

<style scoped>
.status {
  margin: 0 20px;
  padding: 3px 10px;
  border: 1px solid #70b603;
  border-radius: 40px;
  color: #70b603;
  display: inline;
}
</style>
